<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        
        p {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }

    </style>
</head>
<body>
    <!-- HTML属性的属性名只能是小写,如果写成大写会自动转化为小写 -->
    <div ASD="ASD" dataIndex="0"></div>

    <div id="app">

        <!-- 静态属性 (属性值是定死的) -->
        <!-- html属性 写在标签<>内 对标签的说名  (属性名="属性") -->
        <!-- <p id="demo" class="one" title="hello" data-index="0" ></p> -->


        <!-- v-bind 属性绑定 (动态属性, 属性值可以改变,数据改变,属性也会更新) -->
        <button @click="changeData">change</button>
        <p  v-bind:id="obj.id" v-bind:class="obj.class" v-bind:title="obj.title" v-bind:data-index="obj['data-index']">01 </p>

        <!-- 简写 -->
        <p v-bind="obj">02</p>
    </div>
</body>
<script>

    /* 
        v-bind 属性绑定, 将data中挂载的数据,作为html属性的属性值 (作为属性名也可以!)

            语法:
            v-bind:参数="指令值"
                参数:需要绑定的属性名
                指令值:  需要绑定的属性值(javascript表达式 变量  方法 三目运算符)

            注意:
                1.  如果v-bind的指令的值是null和undefined, 对应属性不会绑定到元素上
                2.  v-bind将data中挂载的数据,作为html属性的属性值 (如果指令的值不是字符串类型, 会隐式转化为字符串(xxx.toString()))

            v-bind简写:
                v-bind可以省略不写,从:开始写  如果v-bind:id="xxx"  => :id="xxx"


            v-bind可以直接绑定一个对象, 此时对象的键名需要绑定属性的属性名, 对象的键值,需要绑定的属性的属性值
                a. 此时v-bind不能简写
                b. HTML属性的属性名只能是小写,如果写成大写会自动转化为小写
              
    
    */

    var vm = new Vue({
        el:"#app",
        data:{

            // 将需要绑定的数据整个到一个对象中  (此时对象的键名,需要绑定属性的属性名)
            obj:{
                id:"demo",
                class:"one",
                title:"hello world",
                "data-index":100,
            }
        },
        methods: {
            changeData(){
                this.obj.id="DEMO"
                this.obj.class="ONE"
                this.obj.title = "HELLO WORLD";
                this.obj["data-index"] = "001"
            },
        }
    })

</script>
</html>